<!-- 文章编辑弹窗 -->
<template>
  <el-dialog
    class="edit-table"
    title="礼品信息"
    width="50%"
    :visible.sync="showDrawer"
    :direction="direction"
    top="1vh"
    :size="'calc(100vw - 256px)'"
    :before-close="close"
  >
    <div class="ele-body">
      <el-row :gutter="15">
<!--        <el-col style="float: right" :md="11" :sm="18">-->
<!--          <el-card shadow="never" body-style="padding: 25px;">-->
<!--          <div style="position: relative">-->
<!--            <img :src="config.gift_image" alt="" style="width: 100%">-->
<!--            <div style="position:absolute;width: 15%;top: 42%;left: 42.5%">-->
<!--              <img :src="form.image" alt="" style="width: 70px;height: 70px">-->
<!--            </div>-->
<!--            <div class="gift_char">{{form.name}}</div>-->
<!--          </div>-->
<!--          </el-card>-->
<!--        </el-col>-->
        <el-col style="float: left" :md="13" :sm="16">
<!--          <el-card shadow="never" body-style="padding-top: 5px;">-->
            <el-form
              ref="form"
              :model="form"
              :rules="rules"
              label-width="170px"
              style="max-width: 450px;padding-top: 40px;"
              @submit.native.prevent>
              <el-form-item label="礼品名称:" prop="name">
                <el-input
                  v-model="form.name"
                  placeholder="请输入礼品名称"
                  clearable/>&nbsp;
                <el-tooltip class="item" effect="light" placement="right">
                  <div slot="content">该礼品名称将展示给买家看<br/>展示效果看右边预览<br/>请用对应国家的语言填写</div>
                  <i class="el-icon-warning" style="color: rgba(255, 140, 0, 1)"></i>
                </el-tooltip>
              </el-form-item>
              <el-form-item label="描述:">
                <el-input
                  v-model="form.desc"
                  placeholder="描述是卖家自己看的，相当于是备注"
                  :rows="2"
                  type="textarea"/>
              </el-form-item>
              <el-form-item label="礼品图片:" prop="name">
                <el-upload
                  class="upload-demo"
                  :action=api_base_url
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-remove="beforeRemove"
                  multiple
                  :limit="1"
                  :on-exceed="handleExceed"
                  :on-success="handleSuccess"
                  :file-list="fileList">
                  <el-button size="small" type="primary">点击上传</el-button>
                  <span><el-tag type="warning">建议尺寸600*600, 或者1:1的比例</el-tag></span>

                </el-upload>
              </el-form-item>
<!--              <el-form-item label="是否展示收货地址:" prop="address_display">-->
<!--                <el-select-->
<!--                  v-model="form.address_display">-->
<!--                  <el-option v-for="item in config.address_display" :key="item.val" :label="item.label" :value="item.val"/>-->
<!--                </el-select>&nbsp;-->
<!--                <el-tooltip class="item" effect="light" placement="right">-->
<!--                  <div slot="content">展示收货地址在选择对应礼品后，<br/>会根据需要展示礼品产品页<br/>填写收货地址、国家、城市</div>-->
<!--                  <i class="el-icon-warning" style="color: rgba(255, 140, 0, 1)"></i>-->
<!--                </el-tooltip>-->
<!--              </el-form-item>-->
              <el-form-item label="对应放卡片的产品市场:" prop="country">
                <el-select v-model="form.country">
                  <el-option v-for="(item, index) in config.country" :key="index" :label="item" :value="index"/>
                </el-select>
              </el-form-item>
              <el-form-item label="对应放卡片的Sku:" prop="platform_sku_type">
                <el-select v-model="form.platform_sku_type">
                  <el-option v-for="item in config.platform_sku_type" :key="item.val" :label="item.label" :value="item.val" />
                </el-select>
              </el-form-item>
              <el-form-item label="" v-if="form.platform_sku_type==1" prop="platform_sku_select">
                <el-select filterable multiple v-model="form.platform_sku_select" :filter-method=getOrderSku>
                  <el-option v-for="(item, index) in config.platform_sku_select" :key="index" :label="item" :value="item"/>
                </el-select>
                <div class="info_alert">为空则关联所有产品。如还有其他sku关联，请输入sku并添加</div>
              </el-form-item>
              <el-form-item label="" v-if="form.platform_sku_type==2" prop="platform_sku_desc">
                <el-input
                  v-model="form.platform_sku_desc"
                  placeholder=""
                  :rows="2"
                  type="textarea"/>
                <div class="info_alert">为空则关联所有产品。如还有其他sku关联，请回车隔开sku</div>
              </el-form-item>
              <el-form-item label="礼品类型:" prop="gift_type">
                <el-select v-model="form.gift_type">
                  <el-option v-for="(item, index) in config.gift_type_list" :key="index" :label="item" :value="parseInt(index)"/>
                </el-select>
              </el-form-item>
              <el-form-item label="状态:" prop="status">
                <el-select v-model="form.status">
                  <el-option v-for="item in config.status" :key="item.val" :label="item.label" :value="item.val"/>
                </el-select>
              </el-form-item>
<!--              <el-form-item label="联系邮箱:" prop="email">-->
<!--                <el-input-->
<!--                  v-model="form.email"-->
<!--                  placeholder="请输入邮箱"-->
<!--                  clearable/>-->
<!--              </el-form-item>-->
<!--              <div class="info_alert">如果填写了联系邮箱，那么最后流程完成页面会优先展示此邮箱，空则默认显示激活买家端设置的邮箱</div>-->

<!--              <el-form-item label="礼品预览链接:" prop="gift_link">-->
<!--                <el-input-->
<!--                  v-model="form.gift_link"-->
<!--                  placeholder="请输入礼品预览链接"-->
<!--                  clearable/>-->
<!--              </el-form-item>-->
<!--              <el-form-item label="星级:" prop="star_rating_retention">-->
<!--                <el-select v-model="form.star_rating_retention">-->
<!--                  <el-option v-for="item in config.star_rating_retention" :key="item.val" :label="item.label" :value="item.val"/>-->
<!--                </el-select>-->
<!--                <el-tooltip class="item" effect="light" placement="right">-->
<!--                  <div slot="content">当选择该礼品的客户在系统内星级达到设定<br/>值及以上，才会引导.</div>-->
<!--                  <i class="el-icon-warning" style="color: rgba(255, 140, 0, 1)"></i>-->
<!--                </el-tooltip>-->
<!--              </el-form-item>-->

<!--              <div><span style="color: red">请注意</span>：左边的内容修改会实时出现在右边预览上，如果左边内容没有出现在右边预览，则表示该内容只是给卖家自己看的。</div>-->
              <br/>
            </el-form>
            <div style="text-align: center">
              <el-button @click="$emit('close')" size="medium">取消</el-button>
              <el-button
                type="primary"
                @click="save"
                :loading="loading">保存
              </el-button></div>
<!--          </el-card>-->
        </el-col>
      </el-row>
    </div>
  </el-dialog>
</template>

<script>
import '@riophae/vue-treeselect/dist/vue-treeselect.css';
import axios from "axios";

export default {
  name: 'GiftEdit',
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object,
    configList: Object,
    // 栏目数据
    cateList: Array
  },
  components: {},
  data() {
    return {
      showDrawer: this.visible,
      // api_base_url: process.env.VUE_APP_API_BASE_URL + '/uploadNoLogin/uploadImage',
      api_base_url: axios.defaults.baseURL + '/uploadNoLogin/uploadImage',
      direction: 'rtl',
      // 表单数据
      form: Object.assign({}, this.data),
      config: Object.assign({}, this.configList),
      // 表单验证规则
      rules: {
        name: [
          {required: true, message: '请输入礼品名称', trigger: 'blur'}
        ],
        address_display: [
          {required: true, message: '请选择是否展示收货地址', trigger: 'blur'}
        ],
        sort: [
          {required: true, message: '请输入排序号', trigger: 'blur'}
        ],
        image: [
          {required: true, message: '请上传礼品图片', trigger: 'blur'}
        ],
      },
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,
      fileList: [],

    };
  },
  watch: {
    data() {
      if (this.data) {
        this.form = Object.assign({}, this.data);
        this.isUpdate = true;
      } else {
        this.form = {};
        this.isUpdate = false;
      }
    },
    configList() {
      if (this.configList) {
        this.config = Object.assign({}, this.configList);
      } else {
        this.config = {};
      }
    }
  },
  computed: {},
  mounted() {
    // this.getInfo();
  },
  methods: {
    /* 下拉树格式化 */
    normalizer(d) {
      return {
        id: d.id,
        label: d.name,
        children: d.children || undefined
      };
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handleSuccess(response){
      this.form.image = response.data;
    },
    // eslint-disable-next-line no-unused-vars
    handlePreview(file) {
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },

    //获取订单sku
    getOrderSku(val)
    {
      if (val == '') return;
      this.$http.get('/giftSet/getOrderSku',{
        params: {
          sku: val
        }
      }).then(res => {
        if (res.data.code === 0) {
          this.config.platform_sku_select = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    /* 获取文章详情 */
    getInfo() {
      if (this.data.id > 0) {
        this.$http.get('/giftSet/info?id=' + this.data.id).then(res => {
          if (res.data.code === 0) {
            this.form = res.data.data;
          } else {
            this.$message.error(res.data.msg);
          }
        }).catch(e => {
          this.$message.error(e.message);
        });
      }
    },
    /* 保存编辑 */
    save() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$http.post('/giftSet/edit', this.form).then(res => {
            this.loading = false;
            if (res.data.code === 0) {
              this.$message.success(res.data.msg);
              if (!this.isUpdate) {
                this.form = {};
              }
              this.updateVisible(false);
              this.$emit('done');
            } else {
              this.$message.error(res.data.msg);
            }
          }).catch(e => {
            this.loading = false;
            this.$message.error(e.message);
          });
        } else {
          return false;
        }
      });
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit('update:visible', value);
    },
    /* 关闭页面 */
    close(hide) {
      if (hide) {
        hide();
      }
      this.$emit("done");
    }
  }
}
</script>

<style scoped>
.ele-body {
  padding-bottom: 0;
  margin-top: -30px;
}

.gift_char {
  font-family: comic sans ms,sans-serif;
  font-size: 15px;
  line-height: 20px;
  color: #000;
  position: absolute;
  top: 72%;
  left: 37.5%;
  width: 22%;
  text-align: center;
}

.el-card {
  margin-bottom: 15px;
}

.el-input {
  width: 90%;
}

.info_alert {
  font-size: 13px;
  color: #e6a23c;
  line-height: 18px;
  margin-top: 5px;
}

/* 用户资料卡片 */
.user-info-card {
  padding-top: 8px;
  text-align: center;
}

.user-info-card .user-info-avatar-group {
  position: relative;
  cursor: pointer;
  margin: 0 auto;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  overflow: hidden;
}

.user-info-card .user-info-avatar {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
}

.user-info-card .user-info-avatar-group > i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #FFF;
  font-size: 30px;
  display: none;
  z-index: 2;
}

.user-info-card .user-info-avatar-group:hover > i {
  display: block;
}

.user-info-card .user-info-avatar-group:hover:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .3);
}

.user-info-card .user-info-name {
  font-size: 24px;
  margin-top: 20px;
}

.user-info-card .user-info-desc {
  margin-top: 8px;
}

/* 用户信息列表 */
.user-info-list {
  margin-top: 30px;
}

.user-info-list .user-info-item {
  margin-bottom: 10px;
  display: flex;
  align-items: baseline;
}

.user-info-item > i {
  margin-right: 10px;
  font-size: 16px;
}

.user-info-item > span {
  flex: 1;
  display: block;
}

/* 用户标签 */
.user-info-tags .el-tag {
  margin: 10px 10px 0 0;
}

/* 用户账号绑定列表 */
.user-account-list {
  margin-top: 10px;
}

.user-account-list .user-account-item {
  padding: 15px;
}

.user-account-list .user-account-item .ele-text-secondary {
  margin-top: 6px;
}

.user-account-list .user-account-item .user-account-icon {
  width: 42px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  color: #FFF;
  font-size: 26px;
  border-radius: 50%;
  background-color: #3492ED;
  box-sizing: border-box;
}

.user-account-list .user-account-item .user-account-icon.el-icon-_wechat {
  background-color: #4DAF29;
  font-size: 28px;
}

.user-account-list .user-account-item .user-account-icon.el-icon-_alipay {
  background-color: #1476FE;
  padding-left: 5px;
  font-size: 32px;
}

/* tab页签 */
.user-info-tabs ::v-deep .el-tabs__nav-wrap {
  padding-left: 20px;
}
</style>
